<template>
  <div class="app-container">
    <template>
      <a-table :columns="columns" :data-source="dataSource" bordered>
        <!-- <template v-for="col in customRenderList" v-slot:[col]="text, record, index"> -->
        <template v-for="col in ['name', 'age', 'address']" #[col]="text, record, index">
          <div :key="col">
            <!-- :read-only="readonlyArr.includes(col)" -->
            <a-input
              placeholder="请输入"
              v-if="record.editable"
              :value="text"
              @change="(e) => handleChange(e.target.value, record.key, col)"
            />
            <span v-else>{{ text }}</span>
          </div>
        </template>
        <template #action="text, record, index">
          <div class="editable-row-operations">
            <div v-if="record.editable">
              <a @click="save(record.key)">保存</a>
              <a-divider type="vertical" />
              <a @click="cancel(record.key)">取消</a>
            </div>
            <div v-else>
              <a @click="edit(record.key)">编辑</a>
            </div>
          </div>
        </template>
      </a-table>
    </template>
  </div>
</template>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      url: {
        list: 'web/police/staion/ruleList'
      },
      columns: [
        {
          title: 'name',
          dataIndex: 'name',
          width: '25%',
          scopedSlots: {
            customRender: 'name',
          },
        },
        {
          title: 'age',
          dataIndex: 'age',
          width: '15%',
          scopedSlots: {
            customRender: 'age',
          },
        },
        {
          title: 'address',
          dataIndex: 'address',
          width: '40%',
          scopedSlots: {
            customRender: 'address',
          },
        },
        { title: '右边固定2', width: 200, align: 'center', scopedSlots: { customRender: 'action' } },
      ],
      // 对于某些自动赋值的input框设为 只读
      readonlyArr: ['c'],
      dataSource: [],
      cacheData: [],
    }
  },
  mounted () {
    for (let i = 0; i < 10; i++) {
      this.dataSource.push({
        key: i.toString(),
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
      })
    }
  },
  methods: {
    // 编辑一行
    edit (rowKey) {
      const newData = [...this.dataSource]
      const target = newData.filter(item => rowKey === item.key)[0]
      // 根据rowKey判断该行数据是否存在
      if (target) {
        target.editable = true   // 修改target可以直接影响到newData
        this.dataSource = newData
      }
    },
    // 点击保存
    save (rowKey) {
      const newData = [...this.dataSource]
      const target = newData.filter(item => rowKey === item.key)[0]
      if (target) {
        delete target.editable
        this.dataSource = newData
        this.cacheData = newData.map(item => ({ ...item }))
      }
    },
    // 点击取消
    cancel (rowKey) {
      const newData = [...this.dataSource]
      const target = newData.filter(item => rowKey === item.key)[0]
      if (target) {
        // 将缓存数据中匹配到的数据对象覆盖合并当前被修改的行
        Object.assign(target, this.cacheData.filter(item => rowKey === item.key)[0])
        delete target.editable
        this.dataSource = newData
      }
    },
    // input 输入change
    handleChange (value, rowKey, colName) {
      const newData = [...this.dataSource]
      const target = newData.filter(item => rowKey === item.key)[0]
      if (target) {
        target[colName] = value
        this.dataSource = newData
      }
    },
  },
  destroyed () { }
}
</script>

<style scoped lang="less">
</style>
